<template>
  <div class="flex justify-between">
    <div class="left w-[1192px]">
      <DataBoard/>

      <div class="mt-[40px]">
        <Analysis/>
      </div>

      <div class="mt-[40px]">
        <ProductOrder/>
      </div>

    </div>

    <div class="right w-[480px] ">
<!--      <div class="bg-[#EFEEFF] rounded-[8px] h-[48px] flex-center">-->
<!--        你有4条未读提醒-->
<!--      </div>-->

      <div class="">
        <Todo />
      </div>

      <div class="mt-[65px]">
        <Quick />
      </div>
      <div class="mt-[65px]">
        <Sales />
      </div>
    </div>
  </div>

</template>
<script setup>
import DataBoard from "./components/DataBoard.vue"
import Analysis from "./components/Analysis.vue"
import ProductOrder from "./components/ProductOrder.vue"
import Todo from "./components/Todo.vue"
import Quick from "./components/Quick.vue"
import Sales from "./components/Sales.vue"
</script>
<style scoped lang="scss">
.module-li {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);

}

:deep(.el-card__body) {
  padding: 0;
}

.tab {
  .tab-li {
    border: solid 1px #E4E4E4;
    color: #666666;
    background: #FAFAFA;
    padding: 0 20px;
    height: 36px;

    &:nth-of-type(1) {
      border-radius: 8px 0 0 8px;
    }

    &.active {
      border: solid 1px #3721FF;
      color: #3721FF;
      background: #EFEEFF;
    }

    &:nth-last-of-type(1) {
      border-left: solid 0px #E4E4E4;
      border-radius: 0 8px 8px 0;
    }
  }

}
</style>
